<template>
  <div style="margin-top: 40px">
    <!--<el-button @click="addArticle()">添加文章</el-button>-->
    <div class="articles-area">
      <el-card style="text-align: left">
        <div v-for="article in articles" :key="article.id">
          <div style="float:left;width:85%;height: 150px;">
            <router-link class="article-link" :to="{path:'article/details',query:{id: article.id}}"><span
                style="font-size: 20px"><strong>{{ article.title }}</strong></span></router-link>
            <el-divider content-position="left">{{ article.date }}</el-divider>
            <router-link class="article-link" :to="{path:'article/details',query:{id: article.id}}"><p>
              {{ article.abs }}</p></router-link>
          </div>
          <el-image
              style="margin:18px 0 0 30px;width:100px;height: 100px"
              :src="article.cover"
              fit="cover"></el-image>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
    <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Articles",
  data() {
    return {
      articles: [],
      pageSize: 4,
      total: 0
    }
  },
  mounted() {
    this.loadArticles()
  },
  methods: {
    loadArticles() {
      let _this = this
      this.$axios.get('/api/article/' + this.pageSize + '/1').then(response => {
        if (response && response.status === 200) {
          _this.articles = response.data.data.articles.content
          _this.total = response.data.data.articles.totalElements
        }
      })
    },
    handleCurrentChange(page) {
      let _this = this
      this.$axios.get('/api/article/' + this.pageSize + '/' + page).then(response => {
        if (response && response.data.code === 200) {
          _this.articles = response.data.data.articles.content
          _this.total = response.data.data.articles.totalElements
        }
      })
    }
  }
}
</script>

<style scoped>
.articles-area {
  width: 990px;
  height: 750px;
  margin-left: auto;
  margin-right: auto;
}

.article-link {
  text-decoration: none;
  color: #606266;
}

.article-link:hover {
  color: #409EFF;
}
</style>
